// // map中的配置选项,target 表示地图实例挂载的容器 view 表示地图的视图 Layers 表示地图的底图(都有一个底图) source 图层数据源
import Map from 'ol/Map'
import './style.css'
import 'ol/ol.css'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import { XYZ } from 'ol/source'
const view = new View({
  center: [114.25, 30.59],
  zoom: 10,
  projection: "EPSG:4326"
})
// 城市矢量地图
const gaodeSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',// 高德的数据源
})
const gaodeLayer = new TileLayer({
  source: gaodeSource
})
// 卫星底图
const satelliteSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',// 高德的数据源
})
const satelliteLayer = new TileLayer({
  source: satelliteSource
})
// 标记图层
const markerSource = new XYZ({
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}',// 高德的数据源
})
const markerLayer = new TileLayer({
  source: markerSource
})

const map = new Map({
  target: 'map',
  view,
  layers: [satelliteLayer, markerLayer, gaodeLayer]
})
const btns = document.querySelectorAll('.btns')
btns[0].onclick = function () {
  // 图层按照先后顺序依次绘制到map,如果希望展示其中一个，将其的层级关系置顶即可
  // 下面设置展示城市地图
  // gaodeLayer.setZIndex(100)
  // satelliteLayer.setZIndex(50)
  // markerLayer.setZIndex(49)
  // 添加图层
  // map.addLayer(gaodeLayer)
  // 显示图层
  gaodeLayer.setVisible(true)
}
btns[1].onclick = function () {
  // 下面设置展示卫星地图
  // gaodeLayer.setZIndex(50)
  // satelliteLayer.setZIndex(99)
  // markerLayer.setZIndex(100)
  // 换一个思路--去掉城市矢量图层
  // map.removeLayer(gaodeLayer)
  // 隐藏图层
  gaodeLayer.setVisible(false)
}
